import { classNames } from 'shared/lib/classNames/classNames'
import cls from './BurgerMenu.module.scss'
import { AppLink, AppLinkTheme } from 'shared/UI/AppLink/AppLink'
import { useTranslation } from 'react-i18next'
import { navIcons } from 'shared/config/routeConfig/routeConfig'
import { Switchers } from 'features/Switchers'

interface BurgerMenuProps {
    className?: string,
    navLinks: Record<string, string>,
    state: boolean,
    navigationStateSetter: () => void
}
export default ({ className, navLinks, state, navigationStateSetter }: BurgerMenuProps) => {
    const { t } = useTranslation('navigation')

    return (
        <div className={classNames(cls.burgermenu, {}, [className])}>
            <div className={classNames(cls.blurer, {[cls.blured]: !state}, [])} />
            <div className={classNames(cls.menu, {[cls.collapsed]: state}, [])} >
                <ul className={cls.links}>
                    {
                        Object.keys(navLinks)
                            .map((key) =>
                            <li onClick={navigationStateSetter}>
                                <AppLink theme={AppLinkTheme.PRIMARY} to={key}>{navIcons[key]}</AppLink>
                                <AppLink theme={AppLinkTheme.PRIMARY} to={key}>{t(navLinks[key])}</AppLink>
                            </li>
                        )
                    }
                </ul>
                <hr />
                <Switchers />
            </div>
        </div>
    )
}
